<template>
    <el-dialog class="comp-dialog" :title="title" :visible.sync="acting" top="0" :append-to-body="true" :close-on-click-modal="false" @opened="onEvent('opened')" @closed="onEvent('closed')">
        <div class="comp-dialog__body" :style="{ width, height }">
            <template v-if="!closed">
                <slot></slot>
            </template>
        </div>
    </el-dialog>
</template>

<script>
    import mixin from "../mixin";
    import { string, int } from "../util";
    export default {
        name: "comp-dialog",
        mixins: [mixin],
        props: {
            title: { type: String, default: null },
            width: { type: String, default: null },
            height: { type: String, default: null },
        },
        data: () => ({
            acting: false,
            closed: true,
        }),
        methods: {
            onEvent(type) {
                if (type === "opened") {
                    this.$emit("open");
                } else if (type === "closed") {
                    this.closed = true;
                    this.$emit("close");
                }
            },
            open() {
                this.acting = true;
                this.closed = false;
            },
            close() {
                this.acting = false;
            },
            init() {
                this.open();
            },
        },
    };
</script>

<style lang="scss">
    .comp-dialog {
        &.el-dialog__wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .el-dialog {
            flex: 0 0 auto;
            display: flex;
            flex-direction: column;
            margin-bottom: 0;
            width: auto;
        }

        .el-dialog__header {
            flex: 0 0 auto;
            box-sizing: border-box;
            padding: 10px;
            height: 40px;
            line-height: 20px;
            background-color: #f0f0f0;
        }

        .el-dialog__title {
            font-size: 16px;
        }

        .el-dialog__headerbtn {
            box-sizing: border-box;
            top: 0;
            right: 0;
            padding: 10px;
            width: 40px;
            height: 40px;
            font-size: 20px;
            line-height: 20px;
        }

        .el-dialog__close {
            vertical-align: middle;
        }

        .el-dialog__body {
            flex: 1 1 auto;
            box-sizing: border-box;
            padding: 20px;
            overflow: auto;
        }
    }

    .comp-dialog__body {
        max-width: 80vw;
        max-height: 80vh;
        overflow: auto;
    }
</style>